{extend name="public:base"}
{block name='css'}
<link href="__PUBLIC__/css/plugins/iCheck/custom.css" rel="stylesheet">
{/block}
{block name="js"}
<script src="__PUBLIC__/js/content.min.js?v=1.0.0"></script>
<script src="__PUBLIC__/js/plugins/validate/jquery.validate.min.js"></script>
<script src="__PUBLIC__/js/plugins/validate/messages_zh.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=UQp3MkwNdYHMuDaZ28dIm84c3GCPnmkK"></script>
<script type="text/javascript">

    $.validator.setDefaults({
        highlight: function(e) {
            $(e).closest(".form-group").removeClass("has-success").addClass("has-error")
        },
        success: function(e) {
            e.closest(".form-group").removeClass("has-error").addClass("has-success")
        },
        errorElement: "span",
        errorPlacement: function(e, r) {
            e.appendTo(r.is(":radio") || r.is(":checkbox") ? r.parent().parent().parent() : r.parent())
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"
    });
    $().ready(function() {
        // 百度地图API功能
        function G(id) {
            return document.getElementById(id);
        }
        // 百度地图API功能
        var map = new BMap.Map("l-map");

        //定位
        var geolocation = new BMap.Geolocation();
        var point;
        if ($('.lng').val() && $('.lat').val()) {
            point = new BMap.Point($('.lng').val(),$('.lat').val());
            setDefaultPoint(point);
        } else {
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    point = r.point;
                }
                else {
                    // alert('failed'+this.getStatus());
                    point = new BMap.Point(116.400244, 39.92556);
                }
                setDefaultPoint(point);
            }, {enableHighAccuracy: true});
        }

        function setDefaultPoint(point) {
            var mk = new BMap.Marker(point);
            map.centerAndZoom(point, 15);
            map.addOverlay(mk);
            map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
            map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
            map.panTo(point);
            $('.lng').val(point.lng);
            $('.lat').val(point.lat);
            mk.enableDragging();           // 可拖拽
            mk.addEventListener("dragend", function (e) {
                $('.lat').val(e.point.lat);
                $('.lng').val(e.point.lng);
            });
        }

        //关键词检索
        //建立一个自动完成的对象
        var ac = new BMap.Autocomplete(
            {
                "input" : "suggestId"
                ,"location" : map
            }
        );

        ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });

        var myValue;
        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun(){
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(pp, 15);
                rmk = new BMap.Marker(pp);
                map.addOverlay(rmk);    //添加标注
                $('.lat').val(pp.lat);
                $('.lng').val(pp.lng);
                rmk.enableDragging();           // 可拖拽
                rmk.addEventListener("dragend", function (e) {
                    $('.lat').val(e.point.lat);
                    $('.lng').val(e.point.lng);
                });
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        });
        ac.setInputValue("{$data.address|default=''}");


        var e = "<i class='fa fa-times-circle'></i> ";
        $("#commentForm").validate({
            rules: {
                title: "required",
                lng: 'required',
                lat: 'required'
            },
            messages: {
                title: e + "请输入店铺名称",
                lng: e + "请定位店铺位置",
                lat: e + "请定位店铺位置"
            },
            submitHandler: function(form){
                if ($(form).hasClass('ed')) {
                    return false;
                }

                $(form).addClass('ed');
                $.post('', $(form).serialize(), function(data){
                    layer.msg(data.info);
                    if (data.status == 'y') {
                        setTimeout(function(){window.location.href = '{:url("index")}';},1500);
                    } else {
                        $(form).removeClass('ed');
                    }
                }, 'json');
            },
            invalidHandler: function(form, validator) {  //不通过回调
                return false;
            }
        })
    });
</script>
{/block}
{block name='body'}
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>{empty name='data'}添加{else/}修改{/empty}店铺</h5>
                        <a href="{:url('index')}" class="btn btn-sm btn-primary pull-right m-t-n-xs">返回</a>
                    </div>
                    <div class="ibox-content">
                        <form method="post" class="form-horizontal" id="commentForm" action="" onsubmit="return false;" >
                            <input type="hidden" value="{$data.id|default=''}" name="id" />

							<div class="form-group">
                                <label class="col-sm-2 control-label">店铺名称</label>
                                <div class="col-sm-8">
                                    <input type="text" maxlength="40" name="title" value="{$data.title|default=''}" class="input-sm form-control">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">联系电话</label>
                                <div class="col-sm-8">
                                    <input type="text" maxlength="20" name="tel" value="{$data.tel|default=''}" class="input-sm form-control">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">店铺地址</label>
                                <div class="col-sm-8">
                                    <input type="text" id="suggestId" maxlength="200" name="address" value="{$data.address|default=''}" class="input-sm form-control">
                                    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">定位店铺</label>
                                <input type="hidden" name="longitude" value="{$data.longitude|default=''}" class="lng">
                                <input type="hidden" name="latitude" value="{$data.latitude|default=''}" class="lat">
                                <div class="col-sm-8">
                                    <div id="l-map" style="height: 500px;"></div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button class="btn btn-primary" type="submit">保存内容</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
{/block}
